<template>
  <div class="div">
    <div class="daohang" v-for="(item,index) in list" :key="index">
      <font :class="[isActive==index ?'active':'font']" @click="daohangqiehuan(index)">{{item.name}}</font>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      theme3: "dark",
      isActive: 0,
      list: [],
      msg: "我是子组件的msg"
    };
  },
  methods: {
       ...mapMutations(["xgleixing"]),
    daohangqiehuan(index) {
      this.isActive = index;
      this.$emit("index", this.list[this.isActive].id);
      this.xgleixing(this.list[this.isActive].id);
    },
    chushihua() {
      this.$http
        .get(this.poot + "selecttags")
        .then(response => {
          this.list = response.data;
          console.log(this.list);
          this.$emit("index", this.list[this.isActive].id);
          this.xgleixing(this.list[this.isActive].id);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
 
  },
  mounted() {
    this.chushihua();
  },
  computed: {
    ...mapState(["leixing"]),
    ...mapState(["poot"]),
    ...mapState(["user"])
  }
};
</script>
<style scoped>
.active {
  font-size: 15px;
  color: #ffd04b;
  padding-right: 25px;
  border-right: 2px #ffd04b solid;
  margin-bottom: 10px;
  display: block;
}
.div::-webkit-scrollbar {
  display: none;
}
.div {
  overflow: auto;
  height: 780px;
  margin-top: 10px;
}
.daohang {
  text-align: right;
}
font {
  font-size: 15px;
  color: #fff;
  padding-right: 25px;
  margin-bottom: 10px;
  display: block;
}
</style>
